import "./index.less";
import React, { FC, useState, useEffect, useMemo } from "react";
import {
  NavBar,
  Button,
  Form,
  Input,
  Cascader,
  TextArea,
  ImageUploader,
  Toast,
} from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import {
  publicDisclosureResidentialAffairs,
  partyBuildingCulture,
  governPolicyList,
} from "./service";
import { htmlUnEscape } from "@/utils/tools";

function ContentDetails(props: any) {
  const navigate = useNavigate();
  const location = useLocation();
  const [curData, setCurData] = useState<any>();
  const [articleType, setArticleType] = useState(""); //文章类型
  useEffect(() => {
    setArticleType(location.state?.type);
    setCurData(location.state);
  }, [location]);
  useEffect(() => {
    let content = htmlUnEscape(curData?.policyContent || curData?.content);
    let parentHTML = document.getElementById("article-container");
    parentHTML.innerHTML = content;
  }, [curData]);
  return (
    <div className="contentDetail">
      <div className="contentDetail-hearder">
        <div className="header-bg">
          <NavBar
            onBack={() => {
              if (
                articleType == "partyBuildingCulture" ||
                articleType == "servicePolicy"
              ) {
                navigate(`/${articleType}`);
              } else {
                navigate("/myCommunity", { state: { type: "3" } });
              }
            }}
          >
            <div className="commontitle">内容详情</div>
          </NavBar>
        </div>
      </div>
      <div className="contentDetail-content" /* id="article-container" */>
        <img src="/images/mycommunity/bioqian.png" alt="" className="bioqian" />
        <div className="contentDetail-content-title">
          {curData?.title || curData?.policyTitle}
        </div>
        <div className="contentDetail-content-imfor">
          <div className="imfor-user">
            {curData?.faburen || curData?.issuePerson || curData?.smallType}
          </div>
          <div className="imfor-time">
            {curData?.createTime || curData?.issueTime}
          </div>
        </div>
        <div
          id="article-container"
          className="contentDetail-content-article"
        ></div>
      </div>
    </div>
  );
}

export default ContentDetails;
